<!-- 引入vue框架 -->
<script src="./vue.js"></script>

<div id="app">
    <button @click="add">添加</button>
    <button @click="del">删除</button>
    <button @click="update">更新</button>
    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>科目</th>
            <th>职工号</th>
            <th>课程号</th>
        </tr>
        <tr v-for="item in strList">
            <td>{{item.code}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sci}}</td>
            <td>{{item.zcode}}</td>
            <td>{{item.Ccode}}</td>
        </tr>
    </table>

</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            strList: [],
        },
        methods: {
            add() {
                console.log("进入方法")
                var str = {
                    code: "0203",
                    name: "哈哈",
                    sci: "数学",
                    zcode: "9908",
                    Ccode: "55654",
                }
                this.strList.push(str);
            },
            update() {
                alert("是否更新信息");
            },
            del() {
                this.strList.pop();
            },
        }
    })
</script>